<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
{#    {% for jsfile_name in script_list %}#}
{#        <script type="text/javascript" src="{{ host }}/{{ jsfile_name }}.js"></script>#}
{#    {% endfor %}#}
    <meta charset="UTF-8">
    <title>中国新型冠状病毒实况</title>
</head>
<body>
{{myechart|safe}}
<div id="myChart" style="width:1000px; height:600px;"></div>
{#<div id="bar" style="width:1000px; height:600px;"></div>#}
{#<script>#}
{#    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});#}
{##}
{#    $(#}
{#        function () {#}
{#            fetchData(chart);#}
{#        }#}
{#    );#}
{##}
{#    function fetchData() {#}
{#        $.ajax({#}
{#            type: "GET",#}
{#            url: "http://127.0.0.1:8000/map",#}
{#            dataType: 'json',#}
{#            success: function (result) {#}
{#                chart.setOption(result.data);#}
{#            }#}
{#        });#}
{#    }#}
{#</script>#}
<script>
    var vm = new Vue({

        el: '#app',
        // 修改Vue变量的读取语法，避免和django模板语法冲突
        delimiters: ['[[', ']]'],
        data: {
            pro : {},
            area : {},
            chart : echarts
        },

        methods:{
            f() {
                axios
                    .post('http://127.0.0.1:8000').then((response) => {
                    console.log(22222222222222222)
                    this.pro = response.data['pro'];
                    this.area = response.data['area'];
                })
            },

            mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
                // we can implement any method here like
                f();
            },
        }
    });


</script>
</body>
</html>


